<!DOCTYPE html>
<html>
<head>
  <title>内容发布 - 随访系统</title>
  {include file="public/head" /}
  <link rel="stylesheet" href="__STATIC__/lte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <script src="__STATIC__/ueditor/ueditor.config.js" ></script>
  <script src="__STATIC__/ueditor/ueditor.all.min.js" ></script>
  <style type="text/css">
    .webuploader-pick{
      width: 100%;
      height: 100%;
      opacity: 0.5;
    }
    .upload_img{
      width:150px;
      height:100px;
      float:left;
      position:relative;
      margin-left:10px;
    }
    .to-del{
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    font-size: 18px;
    line-height: 17px;
    text-align: center;
    color: #FFFFFF;
    font-family: 黑体;
    right: -5px;
    top: -5px;
    border-radius: 50%;
    }

  </style>
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="wrapper">

  {include file="public/nav" /}
  {include file="public/menu" /}

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        内容发布管理
        <small>内容发布</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 控制台</a></li>
        <li><a href="{:url('Patient/index')}">内容发布管理</a></li>
        <li class="active">内容发布</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
      <div class="row" >
        <div class="col-xs-12">
          <div class="box"  style="margin-bottom: 0px;">
            <div class="box-header with-border">
              <h3 class="box-title">内容发布管理</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form id="telForm" action="{:url('PublishArticles/add_data')}?publish_id=0" class="form-horizontal">
            <input type="hidden" name="article_id" value="0">
            <input type="hidden" id="content" name="post_content">
            <input type="hidden" id="post_ext" name="post_ext">
              <div class="box-body">
                <div class="form-group">
                  <label class="col-sm-2 control-label"><font color="#cc00">*</font>发布标题:</label>

                  <div class="col-sm-6">
                    <input type="text" class="form-control" name="post_title">
                  </div>
                </div>
<!--                 <div class="form-group">
                  <label class="col-sm-2 control-label"><font color="#cc00">*</font>文章分类:</label>

                  <div class="col-sm-6">
                    <div rows="3" style="float:left;width:85%;" id="patientHtml"></div>
                    <div style="float:right;" class="btn btn-primary open_artcle_box">选择分类</div>
                    <input type="hidden" class="form-control" id="w_category_id" name="w_category_id">
                  </div>
                </div> -->
                <div class="form-group">
                  <label class="col-sm-2 control-label" onclick="getContent();"><font color="#cc00">*</font>发布内容:</label>

                  <div class="col-sm-6">
                     <script id="editor" type="text/plain" style="width:100%;height:300px;"></script>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label"><font color="#cc00"></font>相关图片:</label>

                  <div class="col-sm-6">
                    <div class="timeline-body" style="" id="imgArr" >
                    <div class="" style="width:150px; height:100px;float:left;" id="addImg">
                       <i class="fa  fa-sign-in" style="margin-top:30%;"></i>上传图片
                    </div>
                    </div>
                    <!-- <div style="width:150px;height:100px;" id="addImg"></div> -->
                    
                  </div>
                </div>
              </div>
            <div class="box-footer">
                <div class="col-xs-5" style="margin-left:9%">
                  <button type="button" class="btn btn-success" id="postSubmit">确认提交 </button>
                  <div type="submit" onclick="toIndex();" class="btn btn-primary" style="margin-left: 5px;">返回</div>
                </div>
            </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  {include file="public/foot" /}
</div>
<!-- ./wrapper -->
{include file="public/js" /}
<script src="__STATIC__/lte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js" ></script>
<script src="__STATIC__/lte/bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js" ></script>
<!--上传插件-->
<link rel="stylesheet" href="__STATIC__/webupload/webuploader.css" />
<script type="text/javascript" src="__STATIC__/webupload/webuploader.js"></script>
<script>
  var ue = UE.getEditor('editor');
  function toIndex(){
    location.href="{:url('PublishArticles/index')}";
  }
//调用layui 插件
layui.use('layer', function(){
  // $('.open_artcle_box').click(function(){
  //   var check_id = [];
  //   layer.open({
  //     type: 2,
  //     title:'选择分类',
  //     btn: ['保存', '取消'],
  //     area: ['700px', '520px'],
  //     fixed: false, //不固定
  //     maxmin: true,
  //     content: "{:url('Article/category_form')}?check_id="+check_id,
  //     yes: function (index, layero) {
  //         var iframeWin  = window[layero.find('iframe')[0]['name']];
  //         var attr_data = iframeWin.confirm();
  //         console.log(attr_data);
  //         $.post("{:url('Article/mergeParam')}", attr_data,function(res){
  //             $('#patientHtml').html('');
  //              $.each(res.data, function (index, obj) {
  //               $('#patientHtml').append(obj.data_name+"<br>");
  //             });
              
  //             $('#w_category_id').val(res.data_id);
  //             layer.close(layer.index);
  //        }, "json");
  //     }
  //   });
  // });
  //提交发布内容
  $('#postSubmit').click(function () {
    var text = UE.getEditor('editor').getContent();
    document.getElementById("content").value = text;
    var imgArr = getUploadFile();
    document.getElementById("post_ext").value = JSON.stringify(imgArr);
    $.post($("#telForm").attr('action'), $("#telForm").serialize(),function(res){
              if (res.status==1){
                layer.msg(res.msg,{time: 500},function(index, layero){
                  location.href="{:url('PublishArticles/index')}";
                });
                return false;
              }else{
                layer.msg(res.msg,{time: 500});
                return false;
              }
         }, "json");
  });
});

    function getImg(imgUrl){
        var html = '';
        html+='<div class="upload_img">';
        html+='<div class="to-del" onclick="closeImg(this)">x</div>';
        html+='<img width="150" height="100" src="__ROOT__/'+imgUrl+'" alt="" class="" style="float:left;">';
        html+='</div>';
        $("#imgArr").append(html) ;
   }
    //删除图片
    function closeImg(obj){
        $(obj).parent().remove();
   }
     function find(str,cha,num){
    var x=str.indexOf(cha);
    for(var i=0;i<num;i++){
        x=str.indexOf(cha,x+1);
    }
    return x;
    }
    //获取图片
    function getUploadFile() {
        //20171013更改fileArr为partfileArr，避免和全局变量冲突
        var partfileArr = [];
        $("#imgArr > div.upload_img").each(function(i) {
            var imgPath = $(this).children("img").attr("src");
            if (imgPath != "") {
                // var imgObj = {
                //     img : imgPath
                // };
                var str = find(imgPath,'/',1);
                var path = imgPath .substring(str, imgPath .length);
                partfileArr.push(path);
            }
        });
        return partfileArr;
    }
/**
     * 百度上传js函数
     * @param String elementId          文件域id
     * @param bool isMulti              是否多图片上传 false--单图片  true--多图片
     */
    function bdupload(elementId) {
      var uploader = null;
      uploader = WebUploader.create({
        // swf文件路径
        swf: '__STATIC__/webupload/Uploader.swf',
        // 文件接收服务端。
        server: '{:url("Article/upload")}',
        
        disableGlobalDnd : false,      //是否禁掉整个页面的拖拽功能
        //选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
          id : "#" + elementId,
          innerHTML : "",
          multiple : false
        },         
        accept : {title: 'Images',extensions: 'gif,jpg,jpeg,png',mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png'},                 //指定接受哪些类型的文件
        //thumb : {},                    //配置生成缩略图的选项
        //compress : {},                 //配置压缩的图片的选项
        auto : true,                  //设置为 true 后，不需要手动调用上传，有文件选择即开始上传
        //formData : {},                 //文件上传请求的参数表
        //fileVal : {},                  //设置文件上传域的name
        //method : {},                   //文件上传方式
        fileNumLimit : 4,              //验证文件总数量, 超出则不允许加入队列
        //fileSizeLimit : 5 * 1024,      //验证文件总大小是否超出限制, 超出则不允许加入队列
        fileSingleSizeLimit : 5242880,   //验证单个文件大小是否超出限制
        resize: false                  // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
      });
      uploader.on('fileQueued', function(file) {
        //当文件被加入队列以后触发。
        //创建缩略图  如果为非图片文件，可以不用调用此方法。  thumbnailWidth x thumbnailHeight 为 100 x 100
        /*
        var $li = ...;
        uploader.makeThumb( file, function( error, src ) {
              if ( error ) {
                  $li.text('预览错误');
              } else {
                  $li.append('&lt;img alt="" src="' + ret + '" />');
              }
          }, thumbnailWidth, thumbnailHeight );
          */
      });
      uploader.on('filesQueued', function() {
        //当一批文件添加进队列以后触发
      });
      uploader.on('uploadFinished', function() {
        //当所有文件上传结束时触发
      });
      uploader.on('uploadSuccess', function(file, response) {
        //当文件上传成功时触发
        var totalPath =response;
        getImg(totalPath['data']);
        // if ("child-box" == imgId) {
        //   //多图上传的处理
        //   showAllPic("/" + totalPath);
        // } else {
        //   //单图片上传的处理
        //   showPicture(imgId, "/" + totalPath);
        // }
      });
      uploader.on('uploadError', function(obj) {
        //当文件上传出错时触发
        layer.open({title:'信息',content:'上传出错'});
      });
      uploader.on('error', function(type) {
        layer.open({title:'信息',content:'最多上传4张图片'});
        // //当文件上传出错时触发
        // if(type == "Q_TYPE_DENIED"){
        //             layer.open({
        //                 content: "本插件不支持此格式图片",
        //                 btn: '确定'
        //             });
        // }else if(type == "Q_EXCEED_SIZE_LIMIT"){
        //   //alert("系统提示","<span class='C6'>所选附件总大小</span>不可超过<span class='C6'>" + allMaxSize + "M</span>哦！<br>换个小点的文件吧！");
        // }
      });
      return uploader;
    }
    //实例化
    bdupload('addImg');
</script>
</body>
</html>